<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function () {
            //获取需要操作的对象
            //表单 绑定提交事件
            document.querySelector("#myform").onsubmit = function () {
                //return true表单会提交  return false表单不会提交


                //return 用户名是否正确 && 密码格式是否正确 && 邮箱是否正确;
                return checkUserName() && checkPassWord() && checkEmail();
            }

            //当各项表单失去光标时 调用函数进行验证
            //获取三个输入框对象
            var username = document.querySelector("#username");
            var password = document.querySelector("#password");
            var email = document.querySelector("#email");

            username.onblur = checkUserName;
            password.onblur = checkPassWord;
            email.onblur = checkEmail;

            var flag = false;
            var msg = "";

            //提示信息
            var message;



            //验证用户名
            function checkUserName() {
                message = document.querySelector("#umsg");

                //获取输入框中的用户名
                var userNameVal = username.value.trim();
                //判断值是否合理
                if (userNameVal.length == 0 || userNameVal == "") {
                    msg = "用户名不能为空";
                    flag = false;
                    message.style.color = "red";
                } else if (userNameVal.length < 4 || userNameVal.length > 12) {
                    msg = "用户名在4-12字符之间";
                    flag = false;
                    message.style.color = "red";
                } else {
                    msg = "用户名符合规则";
                    message.style.color = "green";

                    flag = true;
                }
                message.innerHTML = msg;
                return flag;
            }

            //验证密码
            function checkPassWord() {
                message = document.querySelector("#pmsg");

                //获取密码的值
                var pwdVal = password.value.trim();
                if (pwdVal.length >= 4) {
                    flag = true;
                    message.innerHTML = "验证通过";
                    message.style.color = "green";
                } else {
                    flag = false;
                    message.innerHTML = "密码不能小于4位";
                    message.style.color = "red";
                }

                return flag;
            }
            //验证邮箱
            function checkEmail() {
                message = document.querySelector("#emsg");
                //获取邮箱的值
                var emailVal = email.value.trim();

                //如果空直接返回false
                if (emailVal.length == 0 || emailVal == "") {
                    flag = false;
                    message.style.color = "red";
                    message.innerHTML = "邮箱不能为空";
                    return flag;
                }

                //邮箱包含@
                if (emailVal.indexOf("@") == -1) {
                    flag = false;
                    message.style.color = "red";
                    message.innerHTML = "邮箱必须包含@符号";
                    return flag;
                }

                //邮箱包含@
                if (emailVal.indexOf(".") == -1) {
                    flag = false;
                    message.style.color = "red";
                    message.innerHTML = "邮箱必须包含.符号";
                    return flag;
                }

                //邮箱@符号在.的前面 123@qq.com
                if (emailVal.indexOf("@") > emailVal.indexOf(".")) {
                    flag = false;
                    message.style.color = "red";
                    message.innerHTML = "邮箱必须@必须在.符号的前面";
                    return flag;
                }


                //正确

                message.innerHTML = "邮箱校验通过";
                message.style.color = "green";
                return true;
            }


        }

    </script>
</head>

<body>
    <!-- 定义表单 -->
    <form action="#" method="post" id="myform">
        <table>
            <tr>
                <td>用户名:</td>
                <td><input type="text" name="username" id="username" placeholder="用户名..."></td>
                <td><span id="umsg">(*请输入您的用户名)</span></td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input type="password" name="password" id="password" placeholder="密码..."></td>
                <td><span id="pmsg">(*请输入您的密码)</span></td>
            </tr>
            <tr>
                <td>邮箱:</td>
                <td><input type="text" name="email" id="email" placeholder="邮箱..."></td>
                <td><span id="emsg">(*请输入您的邮箱)</span></td>
            </tr>
            <tr>
                <td><input type="submit" value="注册"></td>
                <td><input type="reset" value="取消"></td>
            </tr>
        </table>

    </form>

</body>

</html>